<template>
  <div>
    <a-spin size="large" :spinning="spinning">
      <a-row :gutter="20">
        <a-col :span="8" class="item">
          <a-card hoverable class="add-item" @click="addWarehouse">
            <a-icon type="plus"/>
            添加仓库
          </a-card>
        </a-col>
        <a-col :span="8" v-for="(item, index) in this.data" :key="index" class="item">
          <a-card hoverable>
            <template slot="actions" class="ant-card-actions">
              <span>负责人: {{ item.principle }}</span>
              <span @click="loadCommodityByWid(item.id)">
                <a-icon type="appstore"/> 库存管理
              </span>
              <span @click="loadInventoryRecord(item.id)">
                <a-icon type="container"/> 库存记录
              </span>
            </template>
            <a-card-meta
                :title="item.name"
                :description="'仓库ID：' + item.id + ' 创建时间：' + item.createTime">
              <img class="image" slot="avatar" :src="imgList[Math.floor(Math.random() * 3)]"
                   alt=""/>
            </a-card-meta>
          </a-card>
        </a-col>
      </a-row>
    </a-spin>

    <a-modal
        title="新增仓库"
        :visible="visible"
        cancelText="返回"
        okText="确认"
        @ok="submit"
        @cancel="cancel"
    >
      <a-form-model :model="form">
        <a-form-model-item label="仓库名称">
          <a-input placeholder="请输入仓库名称" v-model="form.name" />
        </a-form-model-item>
        <a-form-model-item label="仓库负责人">
          <a-select v-model="selectEmpIndex" placeholder="请选择仓库负责人">
            <a-select-option :value="index" v-for="(item, index) in empData" :key="index">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-modal>

    <a-modal
        title="库存详情"
        :visible="inventoryVisible"
        :footer="null"
        width="50%"
        @cancel="inventoryVisible = false"
    >
      <a-button type="primary" @click="inAndOutCommodity('出库')" :disabled="disabled">出库</a-button>
      <a-button style="margin-left: 5px" @click="inAndOutCommodity('入库')" :disabled="inDisabled">入库</a-button>
      <a-table :loading="loading" :columns="columns" :data-source="commodityData" rowKey="id">
        <a slot="name" slot-scope="text">{{ text }}</a>
        <span slot="customTitle">商品名</span>
        <span slot="count" slot-scope="count">
          <a-tag color="#108ee9">{{ count }}</a-tag>
        </span>
      </a-table>
    </a-modal>

    <a-modal
        :title="title"
        :visible="inAndOutVisible"
        cancelText="返回"
        okText="确认"
        @ok="inAndOutSubmit"
        @cancel="inAndOutCancel"
    >
      <a-form-model :model="inventoryForm">
        <a-form-model-item label="请选择商品">
          <a-select v-model="selectIndex" placeholder="请选择商品">
            <a-select-option  v-for="(item, index) in commodityList" :key="index">
              {{ item.name }}（数量：{{ item.count }}）
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="商品数量">
          <a-input-number id="inputNumber" v-model="inventoryForm.count" :min="1"/>
        </a-form-model-item>
        <a-form-model-item label="备注">
          <a-input :rows="4" v-model="inventoryForm.description" type="textarea"/>
        </a-form-model-item>
      </a-form-model>
    </a-modal>

    <a-modal
        title="出入库记录"
        width="80%"
        :visible="recordVisible"
        :footer="null"
        @cancel="recordVisible = false"
    >
      <download-excel
          class="export-excel-wrapper"
          :data="recordData"
          :fields="json_fields"
          name="出入库记录.xls"
      >
        <a-button class="btn" icon="download" type="primary">导出库存记录</a-button>
      </download-excel>
      <a-table :loading="recordLoading" :columns="recordColumns" :data-source="recordData" rowKey="id">
        <span slot="type" slot-scope="type">
          <a-tag :color="type === 0 ? 'green' : 'cyan'">{{ type === 0 ? '出库' : '入库' }}</a-tag>
        </span>
      </a-table>
    </a-modal>
  </div>
</template>

<script>
const columns = [
  {
    title: '商品ID',
    dataIndex: 'id',
    key: 'id',
  },
  {
    dataIndex: 'name',
    key: 'name',
    slots: {title: 'customTitle'},
    scopedSlots: {customRender: 'name'},
  },
  {
    title: '库存数量',
    dataIndex: 'count',
    key: 'count',
    scopedSlots: {customRender: 'count'},
  },
];
const recordColumns = [
  {
    dataIndex: 'name',
    key: 'name',
    title: '商品',
  },
  {
    title: '数量',
    dataIndex: 'count',
    key: 'count',
  },
  {
    title: '时间',
    dataIndex: 'createTime',
    key: 'createTime',
  },
  {
    title: '类型',
    key: 'type',
    dataIndex: 'type',
    scopedSlots: {customRender: 'type'},
  },
  {
    title: '备注',
    dataIndex: 'description',
    key: 'description',
  },
];
export default {
  name: "BasWarehouse",
  data() {
    return {
      visible: false,
      inventoryVisible: false,
      inAndOutVisible: false,
      recordVisible: false,
      loading: false,
      recordLoading: false,
      disabled: false,
      inDisabled: false,
      form: {id: '', principle: '', name: '', eid: ''},
      spinning: false,
      data: [],
      commodityData: [],
      recordData: [],
      commodityList: [],
      empData: [],
      columns,
      recordColumns,
      warehouseId: '',
      title: '',
      selectIndex: 0,
      selectEmpIndex: '',
      imgList: [
        require('../../assets/warehouse0.svg'),
        require('../../assets/warehouse1.svg'),
        require('../../assets/warehouse2.svg'),],
      inventoryForm: {
        wid: '',
        cid: '',
        name: '',
        description: '',
        count: 1,
      },
      json_fields: {
        "商品ID": "cid",
        "商品名称": "name",
        "类型": {
          field: 'type',
          callback: (value) => {
            console.log(value)
            return value === 0 ? '出库' : '入库'
          }
        },
        "数量": "count",
        "备注": "description",
        "时间": "createTime",
      },
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    addWarehouse() {
      this.getRequest('/api/employee/warehouse/').then(resp => {
        this.empData = resp
        this.visible = true
      })
    },
    inAndOutSubmit() {
      if (this.commodityList.length === 0) {
        this.$message.error('没有可入库的商品')
        return
      }
      if (this.title === '入库') {
        this.inventoryForm.wid = this.warehouseId
        this.inventoryForm.cid = this.commodityList[this.selectIndex].cid
        this.inventoryForm.name = this.commodityList[this.selectIndex].name
        this.postRequest('/api/inventory/in/', this.inventoryForm).then(resp => {
          if (resp) {
            this.inAndOutVisible = false
            this.loadCommodityByWid(this.inventoryForm.wid)
            this.inventoryForm.count = 1
            this.inventoryForm.description = ''
            this.selectIndex = 0
          } else {
            this.inAndOutVisible = false
            this.inventoryForm.count = 1
            this.inventoryForm.description = ''
            this.selectIndex = 0
          }
        })
      }
      else {
        this.inventoryForm.wid = this.warehouseId
        this.inventoryForm.cid = this.commodityList[this.selectIndex].id
        this.inventoryForm.name = this.commodityList[this.selectIndex].name
        this.postRequest('/api/inventory/out/', this.inventoryForm).then(resp => {
          if (resp) {
            this.inAndOutVisible = false
            this.loadCommodityByWid(this.inventoryForm.wid)
            this.inventoryForm.count = 1
            this.inventoryForm.description = ''
            this.selectIndex = 0
          } else {
            this.inAndOutVisible = false
            this.inventoryForm.count = 1
            this.inventoryForm.description = ''
            this.selectIndex = 0
          }
        })
      }
    },
    inAndOutCancel() {
      this.inAndOutVisible = false
      this.inventoryForm.count = 1
      this.inventoryForm.description = ''
      this.selectIndex = 0
    },
    inAndOutCommodity(title) {
      this.title = title
      this.inAndOutVisible = true
      if (title === '出库') {
        this.getRequest('/api/commodity/warehouse/' + this.warehouseId).then(resp => {
          this.commodityList = resp
        })
      } else {
        this.getRequest('/api/inventory/purchase/').then(resp => {
          this.commodityList = resp
        })
      }
    },
    loadInventoryRecord(value) {
      this.recordVisible = true
      this.recordLoading = true
      this.getRequest('/api/inventory/record/warehouse/' + value).then(resp => {
        this.recordData = resp
        this.recordLoading = false
      })
    },
    loadCommodityByWid(value) {
      this.warehouseId = value
      this.inventoryVisible = true
      this.loading = true
      this.getRequest('/api/inventory/warehouse/' + value).then(resp => {
        this.commodityData = resp
        this.disabled = this.commodityData.length === 0
      })
      this.getRequest('/api/inventory/purchase/').then(resp => {
        console.log(resp)
        this.inDisabled = resp.length === 0
      })
      this.loading = false
    },
    loadData() {
      this.spinning = true
      this.getRequest('/api/warehouse/').then(resp => {
        if (resp) {
          this.spinning = false
          this.data = resp
        }
      })
    },
    submit() {
      if (this.form.name === '') {
        this.$message.error('仓库名称为空')
        return
      }
      if (this.empData.length === 0) {
        this.$message.error('不存在未分配仓库的员工')
        return
      }
      if (this.selectEmpIndex !== '') {
        this.form.eid = this.empData[this.selectEmpIndex].id
      } else {
        this.$message.error('未选择仓库管理员')
        return
      }
      this.postRequest('/api/warehouse/', this.form).then(resp => {
        if (resp) {
          this.form = {name: ''}
          this.selectEmpIndex = ''
          this.visible = false
        }
        this.loadData()
      })
    },
    cancel() {
      this.form = {name: ''}
      this.selectEmpIndex = ''
      this.visible = false
    }
  },
}
</script>

<style scoped>
.add-item {
  text-align: center;
  line-height: 120px;
  min-height: 120px;
  border: 1px dashed #91949c;
}

.add-item:hover {
  border: 1px dashed #5a84fd;
  color: #5a84fd;
}

.item {
  margin-bottom: 20px;
}

.image {
  width: 80px;
  height: 80px;
}

.btn {
  margin-bottom: 15px;
  letter-spacing: 1px;
}
</style>